<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变效果</title>

    <style>
        div{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: whitesmoke;

            /* 渐变效果 针对哪个属性设置all  整个渐变的时间  变化的速度  延迟的时间 */
            transition: all 2s ease-in 0.5s;
        }

        div:hover{
            /* 圆角边框 */
            border-radius: 50%;
            background-color: rosybrown;
            /* 阴影：inset内嵌  x轴阴影拓展 y轴阴影拓展 阴影半径 阴影颜色 */
            box-shadow: inset 20px 10px 15px ;
        }
    </style>

</head>
<body>

    <div></div>

</body>
</html>